<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    height: 2000px;
    border: 1px solid black;
    position: relative;
  }
  #box {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
  }
  .btn-wrap {
    width: 500px;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
<body class=".body">
  <!-- 考试要求：
    1 按下box，其1S变为圆形；松开鼠标，其1S回复原样。

    2 每次点击box，其获得一个随机背景颜色。

    3 可随意拖动box，但box不能被拖出视口。

    4 输入 x y 坐标，点击 go 按钮，box 从当前位置move到 x y 位置。
      若输入非法坐标， alert 提醒，box位置不变。
  -->
  <div id="box" class="box"></div>
  <div class="btn-wrap">
    <span>
      x: <input type="text" class="input-x">
    </span>
    <span>
      y: <input type="text" class="input-y">
    </span>
    <button class="btn">GO</button>
  </div>
</body>
</html>
<script src="./lodash.js"></script>
<script src="./随机颜色.js"></script>
<script>
    function Week(constion){
        this.domcont = document.querySelector(constion)

        this._box = this.domcont.querySelector('.box')
        this._body = this.domcont
        // console.log(this.domcont,this._body);
        this.moveStart()
        this.moveStop()
        this.move()
    }

    Week.prototype.moveStart = function(){
        const that = this._box
        // let offsetX = 0;
        // let offsetY = 0;
        function fn(e){
            that.style.background = randomMath()
            // console.log(randomColor());
            // this._box.style.borderRadius = '50%';
            let rad = 0

            const set = setInterval(e => {
                rad += 5;
                that.style.borderRadius = rad + '%';
                if(rad > 50){
                    clearInterval(set)
                }
            },16)
            // offsetX = e.offsetX
            // offsetY = e.offsetY

        }
        that.addEventListener('mousedown',fn)

        // that.removeEventListener('mousedown',fn)
        // e => {
        //     this._box.style.background = randomMath()
        //     // console.log(randomColor());
        //     // this._box.style.borderRadius = '50%';
        //     let rad = 0

        //     const set = setInterval(e => {
        //         rad += 5;
        //         this._box.style.borderRadius = rad + '%';
        //     },16)

        // })
    }

    Week.prototype.moveStop = function(){
        // this._box.removeEventListener('mousedown',fn)
        this._box.addEventListener('mouseup',e => {

            // console.log('123');

            // this._box.style.borderRadius = '0%';
            let rad = 50
        
            const set1 = setInterval(e => {
                rad -= 5;
                this._box.style.borderRadius = rad + '%';
                if(rad < 0){
                    clearInterval(set1)
                }
            },16)
        })
    }

    Week.prototype.move = function(){

      const that = this._box
      let offsetX = 0;
      let offsetY = 0;

      const boxwidth = getComputedStyle(that).width
      const boxheight = getComputedStyle(that).height

      function move(e){
          const X = e.pageX - offsetX;
          const Y = e.pageY - offsetY;

          if(X < 0){
              X = 0
          }
          if(Y < 0){
              Y = 0
          }

          that.style.top = Y + 'px'
          that.style.left = X + 'px'
      }
      this._box.addEventListener('mousedown',e => {
          offsetX = e.offsetX
          offsetY = e.offsetY
          document.addEventListener('mousemove',move)
      })
      this._box.removeEventListener('mouseup',e => {
          document.removeEventListener('mousemove',move)
      })
        

    }

    
    new Week('body')
</script>